<template>
  <div id="blackAndWhiteBox"></div>
  <div id="scanlineCircleInfo">
    <p>虽然这不是一个复杂的效果，但这是一个开始接触着色器的良好开端。</p>
  </div>
</template>

<script>
import InitCesium from "@/lib/initCesium.js";
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";

export default {
  data() {
    return {
      viewerObj: null,
    };
  },
  mounted() {
    this.init();
  },
  unmounted() {
    this.viewerObj.destroy();
  },
  methods: {
    init() {
      this.viewerObj = InitCesium.init("blackAndWhiteBox");

      this.viewerObj.scene.postProcessStages.add(
        Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
      );
    },
  },
};
</script>

<style>
#blackAndWhiteBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#scanlineCircleInfo {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 200px;
  color: #f2f2f2;
  padding: 15px;
  border-radius: 3px;
  background-color: #696969;
}

#scanlineCircleInfo p {
  margin: 0;
  text-indent: 2em;
}
</style>
